<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="理财购买记录" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <avue-data-panel :option="sum_option"></avue-data-panel>
    <div class="crud_content">
      <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
        v-model="crudData.form" @selection-change="selectionChange" @refresh-change="refreshChange"
        @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
        @size-change="sizeChange" ref="crud" @on-load="onLoad">
        <template #menu-left>
          <el-button type="danger" icon="el-icon-delete" @click="rowDelete">批量删除
          </el-button>
        </template>
        <template #test6="{ row }">
          <el-tag type="success" v-if="row.test6 == '0'"> 收益中</el-tag>
          <el-tag type="primary" v-else="row.test6 == '1'"> 已结束</el-tag>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.confirmDeleteVisible" append-to-body title="" width="440" destroy-on-close center
      class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.indexId }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { computed, reactive } from 'vue';
import { RecordPage, RecordRemove, totalAmount } from '@/api/user'
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
// 计算总投资金额
const totalInvestment = computed(() => {
  return crudData.data.reduce((total, item) => {
    return total + parseFloat(item.test1);
  }, 0).toFixed(2);
});


const sum_option = reactive({
  span: 6,
  decimals: 2,
  data: [
    {
      title: '总投资金额',
      count: 20,
      icon: "el-icon-message",
      color: "#00a7d0",
    },
  ],
})

let option: any = reactive({
  height: 'auto',
  calcHeight: 80,
  searchShow: true,
  searchMenuSpan: 24,
  searchMenuPosition: 'right',
  tip: true,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  gridBtn: true,
  menu: false,
  selection: true,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "编号",
      prop: "number",
      search: true,
      sortable: true,
      span: 24,
    },
    {
      label: "用户账号",
      prop: "userNumber",
      search: true,
      span: 24,
    },
    {
      label: "产品名称",
      prop: "productName",
      search: true,
      span: 24,
    },
    {
      label: "投资金额",
      prop: "tzMoney",
      span: 24,
    },
    {
      label: "每日收益",
      prop: "earningsEveryday",
      span: 24,
    },
    {
      label: "总收益",
      prop: "earningsSum",
      span: 24,
    },
    {
      label: "当前收益",
      prop: "earningsAtPresent",
      span: 24,
    },
    {
      label: "购买时间",
      prop: "time",
      span: 24,
      sortable: true,
    },
    {
      label: "状态",
      prop: "state",
      search: true,
      type: 'select',
      filters: true,
      filterMethod: function (value, row, column) {
        return row.state === value;
      },
      dicData: [
        {
          label: '进行中',
          value: '1'
        },
        {
          label: '已结束',
          value: '2'
        },
      ],
      span: 24,
    },
  ]
})
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  deleteFlag: false,
  confirmDeleteVisible: false,
  selectList: [],
  index_unit: [],
  query: {},
  indexId: '',
  loading: true,
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
  },
  filedArr: [],
  data: []
})

function refreshChange() {
  onLoad(crudData.page, crudData.query);
}

function searchChange(params: any, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

function rowDelete() {
  if (crudData.selectList.length === 0) {
    ElMessage.warning('请选择要删除的数据');
    return;
  }
  crudData.indexId = crudData.selectList.map(item => item.id).join(',')
  crudData.confirmDeleteVisible = true
}

function handleDeleteConfirm() {
  RecordRemove(crudData.indexId).then(res => {
    ElMessage.success('操作成功')
    onLoad(crudData.page)
  }).catch(err => {
    ElMessage.error(err)
  })
  crudData.confirmDeleteVisible = false
}

function handleDeleteCancel() {
  crudData.confirmDeleteVisible = false
}

// 根据操作的命令执行操作
function handleCommand(command, row) {
  console.log('command>>', row)
  if (command === 'delete') {
    ElMessage.success('删除成功');
  }
}

function selectionChange(list) {
  crudData.selectList = list
  crudData.deleteFlag = crudData.selectList.length > 0;
}
const loadTagData = async () => {
  let res = await totalAmount()
  console.log('sssss', res);

  sum_option.data[0].count = res.data
}
loadTagData()
const onLoad = (page: any, params = {}) => {
  crudData.loading = true;
  RecordPage(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    // const numberRegex = /(\d+\.\d+)/;
    // const match = res.msg.match(numberRegex);
    // if (match && match[0]) {
    //   console.log('match>>', match[0])
    // }
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records;
    crudData.loading = false;
  });
  // crudData.data = [
  //   {
  //     index: '8',
  //     account: '44123',
  //     test: 'Financial management project 1',
  //     test1: '600.00',
  //     test2: '6.00',
  //     test3: '42.00',
  //     test4: '0.00',
  //     test5: '2024-06-24 10:55:35',
  //     test6: '0',
  //   },
  //   {
  //     index: '7',
  //     account: '44123456',
  //     test: 'Financial management project 6',
  //     test1: '13133.00',
  //     test2: '485.92',
  //     test3: '177360.80',
  //     test4: '0.00',
  //     test5: '2024-01-26 10:16:16',
  //     test6: '0',
  //   },
  //   {
  //     index: '6',
  //     account: '4412345678',
  //     test: 'Financial management project 6',
  //     test1: '4000.00',
  //     test2: '148.00',
  //     test3: '54020.00',
  //     test4: '0.00',
  //     test5: '2024-01-23 07:26:06',
  //     test6: '0',
  //   },
  //   {
  //     index: '5',
  //     account: '44123456789',
  //     test: 'Financial management project 6',
  //     test1: '3000.00',
  //     test2: '111.00',
  //     test3: '40515.00',
  //     test4: '0.00',
  //     test5: '2024-01-23 07:26:02',
  //     test6: '0',
  //   },
  //   {
  //     index: '4',
  //     account: '44123',
  //     test: 'Financial management project 6',
  //     test1: '2000.00',
  //     test2: '74.00',
  //     test3: '27010.00',
  //     test4: '0.00',
  //     test5: '2024-01-23 07:25:58',
  //     test6: '0',
  //   },
  //   {
  //     index: '3',
  //     account: '441234',
  //     test: 'Financial management project 5',
  //     test1: '10000.00',
  //     test2: '37.00',
  //     test3: '13505.00',
  //     test4: '0.00',
  //     test5: '2023-05-20 08:14:59',
  //     test6: '0',
  //   },
  //   {
  //     index: '2',
  //     account: '44123456789',
  //     test: 'Financial management project 6',
  //     test1: '10000.00',
  //     test2: '280.00',
  //     test3: '50400.00',
  //     test4: '0.00',
  //     test5: '2024-01-23 07:25:53',
  //     test6: '0',
  //   }
  // ];
  // crudData.page.total = crudData.data.length;

  // getList().then((res: any) => {
  //     console.log('getReviewLog--', res);
  //     const Data = res.data.data;
  //     // crudData.page.total = Data.total;
  //     crudData.logData = Data;
  //     crudData.loading = false;
  // });
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.content-header {
  margin: 1rem;
}


.basic-container {
  position: relative;
}

.investment-summary {
  position: absolute;
  width: 12rem;
  top: 3.4rem;
  left: 1.3rem;
  z-index: 10;
}

.investment-amount {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
}

.search-and-table {
  margin-top: 100px;
}

.clear {
  clear: both;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}
</style>
